<template>
    <div>
        <el-container>
            <el-aside class="admin_aside" width="12%">
                <el-menu default-active="1">
                    <el-menu-item index="1">
                        <span style="margin: auto">人员维护</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <div>
                    <div style="display: flex;flex-direction: row;justify-content: center">
                        <el-input v-model="inputInfo" style="width: 200px;margin-right: 10px" type="text" clearable></el-input>
                        <el-button icon="el-icon-search" size="medium" style="margin-left: 10px"
                                   type="success" @click="handleUserSearch">搜索
                        </el-button>
                        <el-button icon="el-icon-plus" size="medium"
                                   style="margin-left: 100px" type="primary"
                                   @click="handleUserAddition">新增
                        </el-button>
                    </div>
                    <div style="display: flex;align-items: center;flex-direction: column;margin-left: -25px">
                        <el-table :key="centerDialogVisible"
                                  :data="users"
                                  :row-class-name="tableRowClassName"
                                  style="width: 90%">
                            <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                            <el-table-column label="账户" prop="value" width="100px"></el-table-column>
                            <el-table-column label="密码" prop="password" width="100px"></el-table-column>
                            <el-table-column label="姓名" prop="name"></el-table-column>
                            <el-table-column label="性别" prop="gender" width="50px"></el-table-column>
                            <el-table-column label="年龄" prop="age" width="50px"></el-table-column>
                            <el-table-column label="编号" prop="identityNumber" width="200px"></el-table-column>
                            <el-table-column label="类型" prop="identity"></el-table-column>
                            <el-table-column label="状态" prop="status"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            :page-size="2"
                            :total="paginationTotal"
                            background
                            layout="prev, pager, next"
                            style="margin-top: 5px">
                        </el-pagination>
                    </div>
                    <el-dialog
                        :title="title"
                        :visible.sync="centerDialogVisible"
                        width="60%">
                        <el-form :model="selectedUser" class="selectedUserForm">
                            <el-form-item label="名称:" prop="value">
                                <el-input v-model="selectedUser.value" auto-complete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="密码:" prop="password">
                                <el-input v-model="selectedUser.password" auto-complete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="姓名:" prop="name">
                                <el-input v-model="selectedUser.name" auto-complete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="编号:" prop="identityNumber">
                                <el-input v-model="selectedUser.identityNumber"></el-input>
                            </el-form-item>

                            <el-form-item label="年龄:" prop="age">
                                <el-input v-model="selectedUser.age" type="number"></el-input>
                            </el-form-item>

                            <el-form-item label="权限:" prop="identityType">
                                <el-select v-model="selectedUser.identityType">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="账号状态:" prop="status">
                                <el-select v-model="selectedUser.status">
                                    <el-option
                                        v-for="item in statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="性别:" prop="gender" style="margin-top: 45px">
                                <el-radio-group v-model="selectedUser.gender" size="small">
                                    <el-radio-button label="男">男</el-radio-button>
                                    <el-radio-button label="女">女</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false;">取 消</el-button>
                            <el-button type="primary" @click="handleDialogEnter">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "Admin",
    data() {
        return {
            keyPath: "",
            users: [],
            identityTypeTable: null,
            selectedUser: {},
            centerDialogVisible: false,
            title: "",
            selectedUserIndex: -1,
            options: [],
            statusOptions: [
                {
                    value: true,
                    label: '正在使用'
                },
                {
                    value: false,
                    label: '已停用'
                }
            ],
            inputInfo: "",
        }
    },
    methods: {
        tableRowClassName({row}) {
            if (row.identityType === "0") {
                return 'admin-row';
            } else if (row.identityType === "3") {
                return 'expert-row'
            } else {
                return ''
            }
        },
        handleUserAddition() {
            this.title = "新增";
            this.centerDialogVisible = true;
            this.selectedUser = {
                id: this.users.length + 1,
                identityType: "1",
                identityNumber: new Date().getTime().toString(),
                status: true,
            };
        },
        handleUserSearch() {
            if (this.inputInfo==="") {
                this.users = variables.users;
            }else {
                this.users = variables.users.filter(user =>
                    user.value.includes(this.inputInfo) ||
                    user.name.includes(this.inputInfo) ||
                    user.gender.includes(this.inputInfo) ||
                    user.identity.includes(this.inputInfo) ||
                    user.status.includes(this.inputInfo) ||
                    user.identityNumber.includes(this.inputInfo)
                );
            }
        },
        handleEdit(index, obj) {
            this.title = "修改";
            this.centerDialogVisible = true;
            this.selectedUserIndex = index;
            this.selectedUser = JSON.parse(JSON.stringify(obj));
        },
        handleDelete(index) {
            this.users.splice(index, 1);
        },
        handleDialogEnter() {
            if (this.title === "新增") {
                this.users.push(this.selectedUser);
            } else {
                this.users[this.selectedUserIndex] = this.selectedUser;
            }
            this.centerDialogVisible = false;
            this.users.forEach(user => {
                user.identity = this.identityTypeTable[user.identityType]
                user.status = user.status ? "正常使用" : "已停用";
            })
        }

    },
    computed: {
        paginationTotal () {
            return this.users.length;
        }
    },
    mounted() {
        this.users = variables.users;
        this.identityTypeTable = variables.identityTypeTable;
        this.users.forEach(user => {
            user.identity = this.identityTypeTable[user.identityType]
            user.status = user.status ? "正常使用" : "已停用";
        })
        for (let i in this.identityTypeTable) {
            this.options.push({
                value: i,
                label: this.identityTypeTable[i],
            })
        }
    }
}
</script>
<style scoped>

.el-table >>> .admin-row {
    background: #f0f9eb;
}

.el-table >>> .expert-row {
    background: oldlace;
}


.admin_aside {
    display: flex;
    justify-content: center;
}

.selectedUserForm {
    height: 300px;
}

.selectedUserForm >>> .el-form-item {
    display: inline-block;
    width: 260px;
    float: left;
    margin: 5px 15px;
}

</style>
